<template>
	<view class="padding-top">
		<view class="crtate">
			<view class="cu-bar solid-bottom">
				<text class="padding-left text-lg text-bold">回收信息</text>
			</view>
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<text class="text-df">品牌及机型</text>
					</view>
					<view class="action text-gray">
							{{model}}
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-df">IMEI</text>
					</view>
					<view style="width: 70%;" class="action text-gray text-right">
						<input placeholder="请输入手机IMEI号" v-model="imel" type="text">
					</view>
				</view>
			</view>
		<view class="cu-bar solid-bottom">
			<text class="padding-left text-lg text-bold">
				手机图片
				<text class="text-sm text-gray">（请根据提示上传手机信息图片）</text>
			</text>
		</view>
			<view class="cu-list no-border grid col-3">
				<view 
				v-for="(item,index) of imgList" 
				:key="item.text"
				@click="upload(index)"
				class="cu-item align-center">
					<view class="imgitem flex align-center">
						<image mode="aspectFill" :src="item.img?item.img:'../../static/images/upimgbg.png'"></image>
					</view>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
	
		<view class="beizhu">
			<view class="cu-bar solid-bottom">
				<text class="padding-left text-lg text-bold">备注</text>
			</view>
			<view class="beizhu-text">
				<textarea class="area bg-gray" 
						maxlength="-1" 
						v-model="textarea"
						placeholder="请对机身信息做简单描述，比如：屏幕更换、有拆过、指纹或人脸无法使用、屏幕触控失灵等"></textarea>
			</view>
		</view>
		
		<view class="tijiao">
			<view class="tj" @click="submit">
				提交订单
			</view>
		</view>
		<view class="ben"></view>
	</view>
</template>

<script>
	import {udpImage,submitOrder } from "../../api/index.js"
	export default {
		data() {
			return {
				model:"",
				imel:"",
				typeid:'',
				textarea:"",
				imgList:[
					{
					text:"机型",
					img:""
				},{
					text:"内存/爱思",
					img:""
				},{
					text:"原色彩",
					img:""
				},{
					text:"背面",
					img:""
				},{
					text:"充电口侧",
					img:""
				},{
					text:"面容",
					img:""
				}]
			}
		},
		async onLoad({model,typeid}) {
			console.log(model)
		this.model = model
		this.typeid = typeid
		},
		methods: {
			//上传图片
			async upload(index){
				uni.showLoading({
					mask:true
				})
				const path = await udpImage()
				console.log(path);
				this.imgList[index].img = path
				uni.hideLoading()
			},
			// 提交按钮
			submit(){
				let image = ''
				this.imgList.forEach((item,index)=>{
					if(item.img !=''){
						image = image + item.img+','
					}
				})
				if(image === '' || this.model==='' || this.emil === '' || this.textarea === ''){
					uni.showToast({
						title:'请填写完整数据',
						icon:'none'
					})
					return
				}
				
				//调用提交接口
				submitOrder({
					img :image,
					typeId:this.typeid,
					remarks:this.textarea,
					imei:this.imel,
					staffId:uni.getStorageSync('info').id
				}).then(res=>{
					uni.showToast({
						title:'提交成功',
						icon:'none'
					})
					uni.navigateTo({
						url:'../myOrder/myOrder?orderType='+0
					})
					console.log(res)
				})
				
			}
		}
	}
</script>

<style>
	.crtate{
		width: 686rpx;
		border-radius: 32rpx;
		background-color: #fff;
		margin: auto;
	}
.cu-list.menu>.cu-item:after{
	display: none;
}
.imgitem,.imgitem>image{
	width: 200rpx;
	height: 200rpx;
}

.beizhu{
	width: 686rpx;
	border-radius: 32rpx;
	background-color: #fff;
	margin: 20rpx auto;
	/* margin-top: 24rpx; */
	border: 1px solid #fff;
}

.area{
	display: block;
	margin: 20rpx auto;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	padding: 40rpx;
	box-sizing: border-box;
}

.tijiao{
	width: 100%;
	height: 120rpx;
	background-color: #fff;
}

.tj{
	width: 686rpx;
	height: 100%;
	background-color: #4470F4;
	border-radius: 56rpx;
	text-align: center;
	margin: 0 auto;
	font-size: 32rpx;
	color: #fff;
	font-weight: 700;
	text-align: center;
	line-height:120rpx ;
}
.ben{
	width: 100%;
	height: 68rpx;
	background-color: #FFF;
}
</style>
